.promo-block {
  object-fit: contain;
  background-image: url("../img/bg-back-mobile@1x.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  background-color: #1a2c33;

  @media (min-resolution: 144dpi), (min-resolution: $retina-dppx) {
    background-image: url("../img/bg-back-mobile@2x.jpg");
    background-size: 768px auto;
    background-repeat: no-repeat;
  }

  &--minimal {
    padding-top: 52px;
    padding-bottom: 66px;
  }

  &::after {
    position: absolute;
    display: block;
    content: "";
    background-image: url("../img/bg-intro-triangle-mobile.svg");
    bottom: 0;
    left: 0;
    width: 100%;
    height: 26px;
  }

  @media (min-width: $tablet-width) {
    &::after {
      background-image: url("../img/bg-intro-triangle-tablet.svg");
      height: 57px;
    }
  }

  @media (min-width: $desktop-width) {
    &::after {
      background-image: url("../img/bg-intro-triangle-desktop.svg");
    }
  }
}

@media (min-width: $tablet-width) {
  .promo-block {
    background-image: url("../img/bg-back-tablet@1x.jpg");

    @media (min-resolution: 144dpi), (min-resolution: $retina-dppx) {
      background-image: url("../img/bg-back-tablet@2x.jpg");
      background-size: 768px auto;
      background-repeat: no-repeat;
    }

    &--minimal {
      margin-top: -126px;
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}


@media (min-width: $desktop-width) {
  .promo-block {
    background-image: url("../img/bg-back-desktop@1x.jpg");

    @media (min-resolution: 144dpi), (min-resolution: $retina-dppx) {
      background-image: url("../img/bg-back-desktop@2x.jpg");
      background-size: 1200px auto;
      background-repeat: no-repeat;
    }

    &--minimal {
      margin-top: -114px;
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}

.promo-block__image {
  object-fit: contain;
  display: block;
  width: 281px;
  height: 214px;

  &--minimal {
    width: 229px;
    height: 39px;
  }
}

@media (min-width: $tablet-width) {
  .promo-block__image {
    width: 460px;
    height: 350px;

    &--minimal {
      margin-top: 85px;
      margin-bottom: -20px;
      padding-top: 134px;
      padding-bottom: 136px;
      width: 460px;
      height: 80px;
    }
  }
}


@media (min-width: $desktop-width) {
  .promo-block__image {
    &--minimal {
      margin-top: 81px;
      margin-bottom: -16px;
    }
  }
}
